<template>
  <div class="container">
    <div class="title">食用农产品来源（产地）分析</div>
    <div class="body">
      <div id="exhart8" class="chart" ref="pieInfosRef"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { getHsLYFXByHsAJZ } from "@/api";
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";

HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);

const pieInfosRef = ref<HTMLElement>();
const initData = async () => {
  const { data } = await getHsLYFXByHsAJZ();
  return data;
};
const getInit = (_data: any) => {
  let data: Array<any> = [];
  _data.forEach((item: any) => {
    data.push({
      name: item.ypcd,
      y: parseFloat(item.hegelv?.replace("%", "")) || 0,
      text: item.hegelv,
      textVal: item.cysumStr,
    });
  });
  var chart = (Highcharts as any).chart("exhart8", {
    chart: {
      type: "pie",
      options3d: {
        axisLabelPosition: "auto",
        enabled: true,
        fitToPlot: true,
        alpha: 45,
      },
      backgroundColor: "none",
      // margin: [0, 100, 0, 0],
      marginLeft: -100,
      style: {
        fontFamily: "",
        fontSize: "15px",
        color: "#fff",
      },
    },
    title: {
      text: null,
      style: {
        fontFamily: "",
        fontSize: "15px",
        color: "#fff",
      },
    },
    credits: {
      enabled: false,
    },
    legend: {
      borderRadiusL: "0",
      // layout: 'vertical',
      align: "right",
      verticalAlign: "top",
      x: 0,
      y: 0,
      width: 150,
      itemWidth: 150,
      itemDistance: 0,
      labelFormatter: function () {
        return `${(this as any).name} ${(this as any).text}`;
      },
      floating: true,
      backgroundColor: "none",
      shadow: true,
      itemStyle: {
        color: "#fff",
      },
      symbolRadius: "0",
    },
    plotOptions: {
      pie: {
        innerSize: 90,
        depth: 55,
        showInLegend: true,
        dataLabels: {
          enabled: true,
          format: "{point.percentage:.2f} %",
          distance: 10,
          style: {
            color: "#fff",
          },
        },
      },
    },
    series: [
      {
        name: "交易数量",
        data: data,
      },
    ],
  });
};
const createPieOption = (datas: any) => {
  let option = {
    legend: {
      type: "plain",
      orient: "horizontal",
      icon: "rect",
      itemWidth: 8,
      itemHeight: 8,
      right: 3,
      top: 10,
      width: "50%",
      data: datas,
      textStyle: {
        color: "#fff",
        fontSize: 14,
        fontWeight: 400,
        fontFamily: "PingFang",
      },
      formatter: (name: any) => {
        const item = datas.find((e: any) => e.name === name);
        return `${item.name} ${item.text} ${item.textVal}吨`;
      },
    },
    series: [
      {
        name: "交易商品类别",
        type: "pie",
        radius: [35, 75],
        center: ["25%", "50%"],
        left: "5.7%",
        roseType: "area",
        itemStyle: {
          borderRadius: 5,
          borderColor: "#fff",
          borderWidth: 0,
        },
        label: {
          alignTo: "none",
          formatter: "{time|{c}%}",
          minMargin: 10,
          edgeDistance: 1,
          lineHeight: 24,
          rich: {
            time: {
              fontSize: 10,
              color: "#fff",
            },
          },
        },
        labelLine: {
          normal: {
            length: 2,
            length2: 8,
          },
        },
        data: datas,
      },
    ],
  };
  return option;
};
// const timer = ref<NodeJS.Timer>();
onMounted(async () => {
  // const pie = echarts.init(pieInfosRef.value!);
  const data = await initData();
  getInit(data);
  // const datas = data.map((item: any) => {
  //   return {
  //     name: item.ypcd,
  //     value: item.hegelv?.replace("%", "") || "0",
  //     text: item.hegelv,
  //     textVal: item.cysumStr,
  //   };
  // });
  // const pieOption = createPieOption(datas);
  // pie.setOption(pieOption);
  // let currentIndex = -1;
  // timer.value = setInterval(() => {
  //   //饼图
  //   let dataLen = datas.length;
  //   // 取消高亮显示
  //   pie.dispatchAction({
  //     type: "downplay",
  //     seriesIndex: 0,
  //     dataIndex: currentIndex,
  //   });
  //   currentIndex++;
  //   if (currentIndex == dataLen) {
  //     currentIndex = -1;
  //   }
  //   // 高亮显示当前项
  //   pie.dispatchAction({
  //     type: "highlight",
  //     seriesIndex: 0,
  //     dataIndex: currentIndex,
  //   });
  //   pie.dispatchAction({
  //     type: "showTip",
  //     seriesIndex: 0,
  //     dataIndex: currentIndex,
  //   });
  // }, 2000);
});
// onUnmounted(() => {
//   timer.value && clearInterval(timer.value);
// });
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  min-height: 0px;
  background-image: url("../../assets/组 7704.png");
  background-size: cover;
  border: 1px solid #172f7e;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    height: 31px;
    font-size: 20px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    padding-top: 3px;
    flex: 0 0 auto;
  }
  .body {
    flex-grow: 1;
    display: flex;
    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
